<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤排序</title>
</head>
<body>
<div id="app">
    <input type="text" v-model="searchValue">
    <ul>
        <li v-for="(item, index) in filterPersons" :key="index">
            {{index + 1}}：{{item.name}}====={{item.age}}
        </li>
    </ul>
    <button @click="type = 1">年龄升序</button>
    <button @click="type = 2">年龄降序</button>
    <button @click="type = 0">原本顺序</button>
</div>
<script src="../vue.min-2.6.10.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            searchValue: '',
            type: 0,
            persons: [
                {name: "Tom", age: 18},
                {name: "Jack", age: 20},
                {name: "Eason", age: 25},
                {name: "Rose", age: 15}
            ]
        }, computed: {
            filterPersons() {
                const {searchValue, type, persons} = this;
                // 对persons进行过滤
                let result = persons.filter(item => item.name.indexOf(searchValue) !== -1)
                if(type === 1) {
                    result= result.sort(function (val1, val2) {
                        return val1.age - val2.age;
                    })
                } else if(type === 2) {
                    result= result.sort(function (val1, val2) {
                        return val2.age - val1.age;

                    })
                }
                return result;


            }
        }
    });
</script>
</body>
</html>